<script lang="ts" setup>
import type {
  VxeGridListeners,
  VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { RoutingStepModel, StepTaskModel } from '#/api/process/models';

import { ref } from 'vue';

import { Page } from '@vben/common-ui';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getStepStandardListApi } from '#/api/process/stepStandard';
import { getStepTaskListApi } from '#/api/process/stepTask';

import RoutingStep2 from '../routing-step/index.vue';
import { useColumns } from './data';

const stepId = ref(0);

const [Grid, gridApi] = useVbenVxeGrid({
  gridOptions: {
    columns: useColumns(),
    data: [],
    border: true,
    stripe: true,
    pagerConfig: {
      enabled: false,
    },
  },
});

const [GridStepTask, gridStepTaskApi] = useVbenVxeGrid({
  gridEvents: {
    cellClick: ({ row }) => {
      getStepStandardListApi(stepId.value, row.id).then((data) => {
        gridApi.grid.loadData(data);
      });
    },
  } as VxeGridListeners<StepTaskModel>,
  gridOptions: {
    columns: [
      { field: 'seq', title: '顺序号', width: 70 },
      { field: 'taskName', title: '工步', minWidth: 120 },
    ],
    data: [],
    border: true,
    rowConfig: {
      isHover: true,
      isCurrent: true,
    },
    pagerConfig: {
      enabled: false,
    },
  } as VxeTableGridOptions,
});

/**
 * 点击后选择行
 */
function itemSelected(item?: RoutingStepModel) {
  gridApi.grid.loadData([]);

  if (item) {
    stepId.value = item.id;
    getStepTaskListApi(item.id).then((data) => {
      gridStepTaskApi.grid.loadData(data);
    });
  } else {
    stepId.value = 0;
    gridStepTaskApi.grid.loadData([]);
  }
}
</script>

<template>
  <Page auto-content-height>
    <div class="flex h-full w-full">
      <div class="h-full w-4/12">
        <RoutingStep2 @item-selected="itemSelected" />
      </div>
      <div class="ml-2 h-full w-2/12">
        <GridStepTask />
      </div>
      <div class="ml-2 h-full w-6/12">
        <Grid />
      </div>
    </div>
  </Page>
</template>
